<template>
	<view :class="'select '+style" :style='{height:(show?items.length*60+60:60)+"rpx"}' >
		<view :class="show?'selshow':''" @click="up">
			<text>{{nowitem}}</text>
		</view>
		<view>
			<view class="item" @click="set(index)" v-for="(item,index) in items" :key="index">{{item}}</view>
		</view>
	</view>
</template>

<script>
	import { reactive,toRefs} from 'vue'
	export default {
		name:"select",
		props:{
			lists:[],
			styles:''
		},
		emits: ['sel'],
		setup(props){
			let data = reactive({
				heightx:60,
				items:props.lists.splice(1),
				show:false,
				nowitem:props.lists[0],
				style:props.styles,
				up:()=>{
					if(data.show){
						data.show=false
					}else{
						data.show=true
					}
				},
				set(e){
					data.nowitem=data.items[e]
					data.show=false
					this.$emit('sel',data.nowitem)
				}
				
			})
			return {...toRefs(data)}
		}
	}
</script>

<style scoped lang="less">
	.select{
		margin-top: -15rpx;
		z-index: 999;
		height: 10rpx;
		width: 60rpx;
		overflow: hidden;
		color: #D9D9D9;
		border-radius: 10rpx;
		border: 1px solid #D9D9D9;
		position: absolute;
		transition: all .5s;
		padding: 5rpx;
		background-color: #FFFFFF;
		line-height: 60rpx;
		.item{
			line-height: 60rpx;
		}
		.item:not(:last-child),.selshow{
			border-bottom: 1px solid #D9D9D9;
		}
	}
	.short{
		width: 100rpx;
		text-align: center;
	}
	.long{
		width: 150rpx;
		padding: 5rpx 20rpx;
	}
</style>
